<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false">
		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="90px" label-position="right" class="flex_form">
						<el-form-item label="显示名称：" prop="menuName" class="flex_item">
							<el-input v-model="form.menuName" clearable placeholder="菜单显示名字"></el-input>
						</el-form-item>
						<el-form-item label="上级菜单：" prop="parentId" class="flex_item">
							<el-cascader v-model="form.parentId" ref="myCascader" :options="menuOptions" :props="menuProps" :show-all-levels="false" placeholder="顶级菜单" @change="handleChanges" clearable ></el-cascader>
						</el-form-item>

						<el-form-item label="类型：" prop="menuType" class="flex_item">
							<el-radio-group v-model="form.menuType">
								<el-radio-button value="M">目录</el-radio-button>
								<el-radio-button value="C">菜单</el-radio-button>
								<el-radio-button value="F">按钮</el-radio-button>
								<!-- <el-radio-button value="iframe">Iframe</el-radio-button>
								<el-radio-button value="link">外链</el-radio-button> -->
							</el-radio-group>
						</el-form-item>
						<el-form-item label="是否外链：" prop="isFrame" class="flex_item" v-if="form.menuType != 'F'">
							<el-radio-group  v-model="form.isFrame">
								<el-radio :value="'0'">是</el-radio>
								<el-radio :value="'1'">否</el-radio>
							</el-radio-group>
						</el-form-item>
					
						<el-form-item label="显示排序：" prop="orderNum" class="flex_item">
							<el-input v-model="form.orderNum"  placeholder="显示排序"  v-numeric></el-input>
							<!-- <div class="el-form-item-msg">权重数字越大，越靠前显示</div> -->
						</el-form-item>
						<el-form-item label="菜单图标：" prop="icon" class="flex_item" v-if="form.menuType != 'F'">
							<sc-icon-select v-model="form.icon" clearable></sc-icon-select>
						</el-form-item>
					
					
					<el-form-item label="组件路径" prop="component" v-if="form.menuType == 'C'" class="flex_item">
						<el-input v-model="form.component" clearable placeholder="请输入组件路径">
							<template #prepend>views/</template>
						</el-input>
						<!-- <div class="el-form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写</div> -->
					</el-form-item>
					<el-form-item label="权限字符：" prop="perms" class="flex_item" v-if="form.menuType != 'M'">
						<el-input v-model="form.perms" clearable placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="路由地址：" prop="path" class="flex_item" v-if="form.menuType != 'F'">
						<el-input v-model="form.path" clearable placeholder=""></el-input>
					</el-form-item>
					
					<el-form-item label="路由参数：" prop="query" class="flex_item" v-if="form.menuType == 'C'">
						<el-input v-model="form.query" clearable placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="是否缓存：" prop="isCache"  class="flex_item" v-if="form.menuType == 'C'">
						<el-radio-group  v-model="form.isCache">
							<el-radio :value="'0'">缓存</el-radio>
							<el-radio :value="'1'">不缓存</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="显示状态：" prop="visible"  class="flex_item" v-if="form.menuType != 'F'">
						<el-radio-group  v-model="form.visible">
							<el-radio :value="'0'">显示</el-radio>
							<el-radio :value="'1'">隐藏</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="菜单状态：" prop="status"  class="flex_item">
						<el-radio-group  v-model="form.status">
							<el-radio :value="'0'">正常</el-radio>
							<el-radio :value="'1'">停用</el-radio>
						</el-radio-group>
					</el-form-item>
					
				</el-form>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
import scIconSelect from '@/components/scIconSelect'
	export default {
		emits: ['success', 'closed'],
		components: {
			scIconSelect,
		},
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '新增',
					edit: '编辑'
				},
				menuOptions: [],
				menuProps: {
					value: 'menuId',
					label: 'menuName',
					checkStrictly: true,
					expandTrigger: 'hover'
				},
				form: {},
				rules: {
					menuName:[
						{required: true, message: '请输入显示名称'}
					],
					parentId:[
						{required: true, message: '请选择上级菜单', trigger: 'change'}
					],
					orderNum:[
						{required: true, message: '请输入显示排序'}
					],
					component:[
						{required: true, message: '请输入组件路径'}
					],
					path:[
						{required: true, message: '请输入路由地址'}
					],
					appName:[
						{required: true, message: '请输入应用名称'}
					],
					secret:[
						{required: true, message: '请输入秘钥'}
					],
					
					exp:[
						{required: true, message: '请选择授权到期日期', trigger: 'change'}
					]
				},
				visible: false,
				isSaveing: false
			}
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				this.getTreeselect()
				return this;
			},
			/** 查询菜单下拉树结构 */
			async getTreeselect() {
				var res = await this.$API.auth.getNavMenu.get();
				this.menuOptions = []
				const menu = { menuId: 0, menuName: '主类目', children: [] }
				this.menuOptions.push(menu)
				menu.children = this.$TOOL.handleTree(res.data, "menuId")
    },
		// 上级菜单
			handleChanges(e) {
				this.$nextTick(() => {
					let parentId = e.length == 1 ? e[0] : e[e.length -1] // 选择1级拿当前， 选择多级拿数组最后一个id
					this.form.parentId = parentId
					this.$refs.myCascader.togglePopperVisible(false)
				})
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						let mode = this.mode
						// 新增
						this.isSaveing = true;
							var res = mode == 'add' ? await this.$API.auth.editMenu.add(this.form) : await this.$API.auth.editMenu.edit(this.form)
							this.isSaveing = false;
							if(res.code == 200){
								this.$store.dispatch('getAuthMenu')
								this.$emit('success')
								this.visible = false;
								this.$message.success("操作成功")
							}
					}
				})
			},
			reset() {
				this.form = {
					menuId: undefined,
					parentId: 0,
					menuName: undefined,
					icon: undefined,
					menuType: "M",
					orderNum: undefined,
					isFrame: "1",
					isCache: "0",
					visible: "0",
					status: "0"
				}
			},
			//表单注入数据
			setData(data){
				let mode = this.mode
				// 新增
				if(mode == 'add') {
					this.reset()
					if (data != null && data.menuId) {
						this.form.parentId = data.menuId
					} else {
						this.form.parentId = 0
					}
				} else { // 编辑
					this.form = Object.assign(this.form, data)
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
